<template>
  <div class="section-wrap">
          <div class="headerBox">
        <div class="header">
            <x-icon type="ios-arrow-left" size="" class="icon-white" @click="goBack"></x-icon>下发违章通知单
        </div>
        </div>
    <div class="form-section" style="margin-top: 40px;">
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>项目名称</label>
        </div>
        <div>
          <p>{{data.projectname}}</p>
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>建设管理单位</label>
        </div>
        <p>{{data.panrentDepartName}}</p>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>业主项目经理</label>
        </div>
        <div>
          <p>{{data.projectleader}}</p>
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>违章时间</label>
        </div>
        <group>
          <datetime v-model="data.weizDate"></datetime>
        </group>
      </div>
    </div>
    <div class="form-section">
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>通知书接收单位</label>
        </div>
        <div class="input_div" @click="getCompany(0)">
          <input type="text"
                 v-model="data.receivedeparname"
                 disabled/>
          <x-icon type="ios-arrow-right" size="22" class="icon-right" ></x-icon>
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>记分通知书编号</label>
        </div>
        <p>{{data.noticenumber}}</p>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>是否记分</label>
        </div>
        <group>
          <popup-picker :data="accopt1"
                        v-model="isjifen"
                        placeholder='请选择'></popup-picker>
        </group>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>违章现象编号</label>
        </div>
        <div>
          <p>{{data.weiznumber}}</p>
        </div>
      </div>
    </div>
    <div class="form-section">
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>被记分单位</label>
        </div>
        <div class="input_div" @click="getCompany(2)">
          <input type="text"
                 v-model="data.coverjifendepart"
                 disabled/>
          <x-icon type="ios-arrow-right" size="22" class="icon-right" ></x-icon>
        </div>
      </div>
      <div class="form-item form-item-style1" >
        <div class="label-title">
          <label>单位记分</label>
        </div>
        <div class="input_div">
          <input type="text"
                 v-model="data.jifendepart"
                 placeholder='请输入'/>
          <x-icon type="ios-arrow-right" size="22" class="icon-right" ></x-icon>
        </div>
      </div>
      <div class="form-item form-item-style1" @click="getUser(2)">
        <div class="label-title">
          <label>被记分人员</label>
        </div>
        <div class="input_div">
          <input type="text"
                 v-model="data.coverjifenperson"
                 disabled/>
          <x-icon type="ios-arrow-right" size="22" class="icon-right" ></x-icon>
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>被记分人员岗位</label>
        </div>
        <div class="input_div">
         {{data.coverjifenstation}}
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>人员记分</label>
        </div>
        <div class="input_div">
          <input type="text"
                 v-model="data.personjifen"
                 placeholder='请输入'/>
          <x-icon type="ios-arrow-right" size="22" class="icon-right" ></x-icon>
        </div>
      </div>
    </div>
    <div class="form-section">
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>违章整改责任人</label>
        </div>
        <div class="input_div"  @click="getUser(0)">
          <input type="text"
                 v-model="data.weizrectifyperson"
                 disabled/>
          <x-icon type="ios-arrow-right" size="22" class="icon-right"></x-icon>
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>整改开始时间</label>
        </div>
        <group>
          <datetime v-model="data.weizrectifystartdate"></datetime>
        </group>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>整改结束时间</label>
        </div>
        <group>
          <datetime v-model="data.weizrectifyenddate"></datetime>
        </group>
      </div>
      <div class="form-item form-item-style1" @click="getCompany(1)">
        <div class="label-title">
          <label>违章验收单位</label>
        </div>
        <div class="input_div">
          <input type="text"
                 v-model="data.weizCheckdepart"
                 disabled/>
          <x-icon type="ios-arrow-right" size="22" class="icon-right"></x-icon>
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>通知书抄送人</label>
        </div>
        <div class="input_div" @click="getUser(1)">
          <input type="text"
                 v-model="data.coverjifenperson"
                 disabled/>
          <x-icon type="ios-arrow-right" size="22" class="icon-right" ></x-icon>
        </div>
      </div>
    </div>
    <ul class="details_list">
      <li>
        <div>
          <h3>
            <span>违章现象：{{data.rectifyList.length}}项</span>
            <x-icon type="ios-arrow-up"
                    size="22"
                    class="icon-up"></x-icon>
          </h3>
        </div>
        <ul class="list_2">
          <li v-for="rectify in data.rectifyList">
            <div style=";line-height: 20px">
              <span class="checkbox" v-bind:class="{active:ids.indexOf(rectify.weiznum)>=0}" @click="addweiznum(rectify.weiznum,rectify)"></span>{{rectify.questiondata}}
            </div>
          </li>
        </ul>
      </li>
    </ul>
    <div class="form-section">
      <h3>
        <span>附加信息</span>
      </h3>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>通知书下发人</label>
        </div>
        <div>
          <p>{{data.noticexfperson}}</p>
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>通知书下发时间</label>
        </div>
        <div v-if="data.noticesendtime">
          <p>{{data.noticesendtime.substring(0,10)}}</p>
        </div>
      </div>
      <div class="btns">
        <!-- <button>保存</button> -->
        <button @click="handleSubmit"
                class="green width200">提交
        </button>
      </div>
    </div>
    <div v-transfer-dom>
      <popup v-model="classValue" width="100%">
        <ztree
          :data="dataTree"
          @nodeClick="nodeClick"
          :name="'departName'"
        ></ztree>
      </popup>
     <!-- <popup v-model="classValue" width="100%">
        <select-depart @nodeClick='selectedDepart'></select-depart>
      </popup>-->
      <popup v-model="classValue1" width="100%">
        <select-user @selectUser='selectUser'></select-user>
      </popup>
    </div>
  </div>
</template>
<script>
  import ztree from "@commonComponents/tree"
  import upload from '@/commonComponents/upload/index'
  import selectDepart from "@commonComponents/selectDepart/selectDepart";
  import formatDate from "../../utils/formatDate";
  import selectUser from "@commonComponents/selectUser/selectUser";
  import {
    XHeader,
    Tabbar,
    TabbarItem,
    Group,
    Cell,
    TransferDom,
    Popup
  } from "vux";

  export default {
    directives: {
      TransferDom
    },
    name: 'brankAbarbeitung',
    data() {
      return {
        ids:[],
        isDisabled: false,
        classValue: false,
        dataTree:[],
        addFlag:true,
        classValue1: false,
        selectDepartType: 0,
        selectUserType: 0,
        accopt: [['单位一', '单位二']],//通知书接收单位
        accoptVal: ['单位一'],
        isjifen: [],
        accopt1: [['是', '否']],
        imgList: ['http://www.bosafe.com/web_images/bossien-%E5%8D%9A%E6%99%9F%E5%86%85%E7%BD%91.jpg'],
        data: {
          rectifyList:[]
        },
        dataList:[]
      }
    },
    components: {
      ztree, upload,
      Popup,
      selectDepart,
      formatDate,
      selectUser
    },
    created() {
      this.getNotice()
      this.examinedUnits()
    },
    methods: {
      goBack(){
        this.$router.go(-1)
      },
      getNotice() {
        let id=this.$route.query.recordId
        let depart=this.$route.query.departId
        this.$axiosAjax.getNotice({rocordId: id,departId:depart}).then((res) => {
          if (res.data.success == true) {
            this.data = res.data.result
            this.data.weizDate = this.data.weizDate.substring(0, 10)
            this.data.weizrectifystartdate = this.data.weizrectifystartdate.substring(0, 10)
            this.data.weizrectifyenddate = this.data.weizrectifyenddate.substring(0, 10)
          }

        }).catch(
          (err) => {

          }
        )
      },
      getCompany(type) {
        this.classValue = true;
        this.selectDepartType = type;
      },
      getUser(type) {
        this.classValue1 = true;
        this.selectUserType = type;
      },
      nodeClick(item) {
        if (this.selectDepartType == 0) {
          this.data.receivedeparid = item.id;
          this.data.receivedeparname = item.departName;
          this.data.coverjifendepart = item.departName;
        } else if(this.selectDepartType == 1) {
          this.data.weizCheckdepart = item.departName;
        }else if(this.selectDepartType == 2){
          this.data.coverjifendepart = item.departName;
        }else{
          this.data.jifendepart = item.departName;
        }
        this.classValue = false;

      },
      //单位树信息
      examinedUnits() {
        this.$axiosAjax.examinedUnits({parentId: -1}).then((res) => {
          if (res.data.success == true) {
            this.dataTree = res.data.result
            console.log(this.dataTree)
          }
        }).catch(
          (err) => {

          }
        )
      },
      selectUser(data) {
        if (this.selectUserType == 0) {
          this.data.weizrectifyperson = data.userName
        } else if(this.selectUserType==1) {
          this.data.coverjifenperson = data.userName
        }else{
          this.data.coverjifenperson=data.userName
        }
        this.classValue1 = false
      },
      handleSubmit() {
        if (!this.addFlag) {
          return false;
        }

        if(this.data.weizDate==null){
          this.$vux.toast.text("请输入违章时间")
          return;
        }
        if(this.data.receivedeparname==null){
          this.$vux.toast.text("请选择通知书接收单位")
          return;
        }
        if(this.isjifen.length<=0){
          this.$vux.toast.text("是否记分不能为空")
          return;
        }
        if(!this.data.personjifen){
          this.$vux.toast.text("请填写人员记分")
          return;
        }
        if(!this.data.coverjifendepart){
          this.$vux.toast.text("请选择被记分单位")
          return;
        }
        if(this.data.weizrectifyperson==null){
          this.$vux.toast.text("请选择违章整改责任人")
          return;
        }
        if(this.data.weizCheckdepart==null){
          this.$vux.toast.text("请选择违章验收单位")
          return;
        }
        if(this.dataList.length<=0){
          this.$vux.toast.text("请选择违章现象")
          return;
        }
        this.data.status=1
        this.data.isjifen=this.isjifen[0],
        this.data.rocordId = this.$route.query.recordId
        this.data.weizRemark=this.dataList.map(x=>x.questiondata).join(',');
        this.data.weiznumber=this.dataList.map(x=>x.weiznum).join(',');
        this.data.weiztype=this.$route.query.name;
        this.data.weizrectifystartdate = this.data.weizrectifystartdate + " 00:00:00"
        this.data.weizrectifyenddate = this.data.weizrectifyenddate + " 00:00:00"
        this.data.weizDate = this.data.weizDate + " 00:00:00"
        this.data.rectifyList = this.dataList
        this.$axiosAjax.createNotice(this.data).then((res) => {
          if (res.data.success == true) {
            this.$vux.toast.text("下发成功")
            this.$router.go(-1)
            this.addFlag = false
          } else {
            this.addFlag = true
          }
        }).catch(
          (err) => {
            this.$vux.toast.text("下发失败")
            this.addFlag = true
          }
        )

      },
      addweiznum(weinum,obj) {
        if (this.ids.indexOf(weinum) >= 0) {
          this.ids.splice(this.ids.indexOf(weinum), 1)
          this.dataList.some((item,i)=>{
            if(item.weiznum == weinum){
              this.dataList.splice(i,1)
              return true;
            }
          })
        } else {
          this.ids.push(weinum)
          this.dataList.push(obj)
        }
        var source=0;
       if(this.dataList.length>0){
         this.dataList.map(x=>x.shouldScore).forEach(element => {
           if(element!=null) {
             source+=Number(element);
           }
         });
       }
         this.data.personjifen=source;
         this.data.jifendepart=source;
      },
    }
  }
</script>
<style lang="less" scoped>
  .details_list {
    background: #fff;
    margin-bottom: 10px;
    h3 {
      span {
        color: #226afd;
      }
    }
    .vux-x-icon {
      fill: #999;
      float: right;
      margin-top: 16px;
    }
    li {
      > div {
        height: 54px;
        line-height: 54px;
        padding-right: 20px;
      }
      .checkbox {
        display: inline-block;
        width: 16px;
        height: 16px;
        background: url(../../../static/images/checkbox.png) no-repeat center;
        background-size: cover;
        margin-right: 10px;
        &.active {
          background: url(../../../static/images/checked.png) no-repeat center;
          background-size: cover;
        }
      }
    }
    > li {
      justify-content: space-between;
      padding-left: 20px;
      // border-bottom: 5px solid #ebeef2;
      > div {
        font-weight: bold;
        font-size: 16px;
        border-top: 1px solid #ebeef2;
      }
      .list_2 {
        li {
          border-top: 1px solid #ebeef2;
          > div {
            font-weight: bold;
            font-size: 14px;
          }
        }
      }
      .list_3 {
        li {
          font-size: 14px;
          text-indent: 2em;
          height: 55px;
          line-height: 54px;
          border-top: 1px solid #ebeef2;
          padding-right: 20px;
        }
      }
    }
  }
</style>


